<template>
  <div>
    <div v-if="!shopCarList.length">暂无商品</div>
    <div
      v-for="(item, idx) of shopCarList"
      :key="idx"
      style="border-bottom: 1px solid"
      class="buyGoodsItem"
    >
      <van-swipe-cell>
        <!-- --------------------- -->
        <div class="goodsContent" style="display: flex">
          <van-checkbox
            style="margin-left: 20px; margin-right: -20px"
            v-model="item.ischeck"
            ><van-cell
          /></van-checkbox>

          <!-- 图片 -->
          <van-image
            width="100px"
            height="100px"
            :src="$resetUrl(item.image)"
          ></van-image>

          <!-- 描述与数量加减按钮 -->
          <div class="content">
            <div class="title">{{ item.name }}({{ item.sku.type }})</div>
            <van-stepper class="content-num" v-model="item.num" integer />
          </div>

          <!-- 价格，数量，小计 -->
          <div class="list">
            <p>￥{{ $toFixed(item.sku.price) }}</p>
            <p>*{{ item.num }}</p>
            <p>￥{{ $toFixed(item.sku.price * item.num) }}</p>
          </div>
        </div>
        <!-- ---------------------- -->

        <!-- 删除按钮 -->
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            class="remove"
            @click="removeItem"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- <div
      style="text-align: right; border-bottom: 1px solid"
      v-if="shopCarList.length"
    >
      商品总价:{{}}
    </div> -->
    <van-submit-bar :price="allTotal" button-text="提交订单" @submit="onSubmit" class="onSubmitBottom">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <TabBar></TabBar>
  </div>
</template>

<script>
// import { getIndexInfo } from "../../apis/home";

// 缺少功能：动态的在这里修改信息时，下方的购物车的数量不会跟着改变，
// 提供方法为watch监听，或者直接对数据进行修改
export default {
  data() {
    return {
      shopCarList: [],
      smallMoney: 0,
    };
  },
  props: {
    data: {
      type: Object,
      require: true,
    },
  },
  computed: {
    allTotal() {
      let sum = 0;
      if (this.shopCarList.length) {
        this.shopCarList.forEach((item) => {
          if (item.ischeck) {
            sum += item.num * item.sku.price;
          }
        });
      }
      return sum * 100;
    },
    allChecked: {
      get() {
        return this.shopCarList.every((item) => {
          return item.ischeck;
        });
      },
      set(bool) {
        if (bool) {
          this.shopCarList.map((item) => {
            item.ischeck = true;
          });
        } else {
          this.shopCarList.map((item) => {
            item.ischeck = false;
          });
        }
      },
    },
  },
  methods: {
    removeItem(idx) {
      this.$dialog
        .confirm({
          title: "删除",
          message: "是否删除该商品",
        })
        .then(() => {
          // on confirm确定
          this.shopCarList.splice(idx, 1);
          this.$setStorage("shopCarList",this.shopCarList)
          this.$toast.success('删除成功');
        })
        .catch(() => {
          // on cancel取消
        });
    },
    onSubmit() {},
    checked() {},
  },
  activated() {
    this.shopCarList = this.$getStorage("shopCarList") || [];
    console.log(this.shopCarList);
  },
};
</script>

<style>
.goodsContent .content {
  width: 50%;
}
.goodsContent .content .title {
  margin-left: 5%;
  margin-top: 5%;
  height: 60%;
  width: 100%;
  font-size: 24px;
}
.goodsContent .content-num {
  text-align: center;
  align-content: flex-end;
}
.list {
  width: 20%;
  text-align: right;
  margin-right: 2%;
}
.remove {
  height: 100%;
}
.onSubmitBottom{
  bottom: 100px;
}
</style>